<template>
  <div class="md-page-search">
    <main class="search-container">
      <!-- <div class="search-input-box">
        <el-input ref="searchInputRef" placeholder="product name" v-model="search.title" style="width: 500px;" clearable @clear="handleClear">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch" title="search products"></el-button>
        </el-input>
      </div> -->
      <!-- <div class="title">
        <p>search results</p>
      </div> -->

      <md-goods-list :loading="infoLoading" :goodsInfo="productData" />
    </main>
  </div>
</template>

<script>
export default {
  name: 'MdPageSearchComponent',
  layout: 'dynamic',
  data () {
    return {
      tabIndex: 1,
      tabs: [
        {
          value: 1,
          label: 'Current',
          // count: 0
        },
        {
          value: 2,
          label: 'Past',
          // count: 0
        },
        {
          value: 3,
          label: 'Experience',
          // count: 0
        }
      ],
      search: {
        title: '',
        category: '1', // 产品类型（1新品 2往期 3体验）
        pageIndex: 1,
        pageSize: 50
      },
      infoLoading: false,
      productData: [],
      productTotal: 0,
    }
  },
  watch: {
    '$route.query': {
      handler (val) {
        this.search.title = val.searchValue
        this.handleSearch()
      },
      immediate: true
    }
  },
  // mounted () {
  //   this.search.title = this.$route.query.searchValue
  //   this.handleSearch()
  // },
  methods: {
    handleSearch () {
      if (this.search.title) {
        this.getSearchData()
      }
    },
    handleClear () {
      this.search.title = ''
      this.productData = []
    },
    async getSearchData () {
      this.infoLoading = true
      const res = await this.$axios.post('web/product/listPage', this.search)
      this.infoLoading = false
      if (res.code == 200) {
        this.productData = res.data.items
        // this.productTotal = res.data.totalItems
      }
    },
    handleTabClick (item) {
      this.tabIndex = item.value
      this.search.category = '' + this.tabIndex
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.md-page-search {
  width: 100%;
  min-height: calc(100vh - 66px);
  background-color: #f9f9f9;

  .search-container {
    width: $md-page-main-width;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    .search-input-box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .title {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      color: #1d2129;

      p {
        flex: 1;
        text-align: right;
        font-size: 16px !important;
        font-weight: normal !important;
        color: #4e5969;
        span {
          color: $md-primary-color;
        }
      }
    }

    .tabs {
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #e5e6eb;
      display: flex;
      align-items: center;
      padding: 13px 0px;
      margin-top: 10px;
      .tabs-item {
        font-size: 16px;
        color: #4e5969;
        margin-right: 46px;
        cursor: pointer;
        &.current {
          font-weight: bold;
          color: $md-primary-color;
          position: relative;
          &::before {
            content: ' ';
            display: block;
            width: 25px;
            height: 3px;
            border-radius: 2px;
            background-color: $md-primary-color;
            position: absolute;
            bottom: -13px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .tab-panel {
    padding-top: 20px;
  }
}
</style>